import React, { Component, lazy } from "react";
import "./Index.scss";
import { Route, Redirect, Switch } from "react-router-dom";
import { TabBar } from "antd-mobile";
var Shop = lazy(() => import("./index/Shop"));
var Cate = lazy(() => import("./index/Classification"));
var Allgoods = lazy(() => import("./index/Allgoods"));
var Shopcar = lazy(() => import("./index/Shopcar"));
var Main = lazy(() => import("./index/Main"));
var Serch = lazy(()=>import("./index/Serch"))
var Login = lazy(() => import("../views/index/AppLogin"));
var Register = lazy(() => import("../views/index/AppRegister"));
var Details = lazy(() => import("./index/CommodityDetails"))
var Notfound = lazy(() => import("./Notfound"));
var Collection = lazy(() => import("./index/Collection"))

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabbarArr: [
        {
          key: "/index/Shop",
          title: "店铺",
          icon: "iconfont icon-dianpu",
        },
        {
          key: "/index/Classification",
          title: "分类",
          icon: "iconfont icon-fenlei",
        },
        {
          key: "/index/Allgoods",
          title: "全部商品",
          icon: "iconfont icon-grouping",
        },
        {
          key: "/index/Shopcar",
          title: "购物车",
          icon: "iconfont icon-gouwuche",
        },
        {
          key: "/index/Main",
          title: "个人中心",
          icon: "iconfont icon-gerenzhongxin",
        },
      ],
    };
  }
  handClick = (key) => {
    this.props.history.push(key)
  }
  render() {
    return (
      <div className="index">
        <Switch>
          <Route exact path="/index/Shop" component={Shop} />
          <Route exact path="/index/Classification" component={Cate} />
          <Route exact path="/index/Allgoods" component={Allgoods} />
          <Route exact path="/index/Shopcar" component={Shopcar} />
          <Route exact path="/index/Main" component={Main} />
          <Route exact path="/index/AppLogin" component={Login} />
          <Route exact path="/index/AppRegister" component={Register} />
          <Route exact path="/index/CommodityDetails" component={Details} />
          <Route exact path={"/index/Serch"} component={Serch} />
          <Route exact path={"/index/Collection"} component={Collection} />
          <Redirect exact from="/index" to="/index/Shop" />
          <Route path="*" component={Notfound} />
        </Switch>

        <TabBar className="myTapbar" onChange={this.handClick}>
          {
            this.state.tabbarArr.map((item) => (
              <TabBar.Item
                key={item.key}
                className={item.icon}
                title={item.title} />
            ))
          }
        </TabBar>
      </div>
    );
  }
}
